<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/add_scores.css">
</head>
<body>
<div class="home">
    <article>
        <ul>
            <li><a href="/add_means">录入学生信息</a></li>
            <li><a href="/sel_means">查看学生资料</a></li>
            <li><a href="/sel_scores">查询学生成绩</a></li>
            <li><a href="/add_scores">添加学生成绩</a></li>
            <li><a href="/home_teach">查看登录日志</a></li>
            <li><a href="/checkpwd">更改密码</a></li>
        </ul>
        <aside class="teacher">
            <div class="add_scores_div">
          <div class="search">
              <label>请选择学期：</label>
              <select name="num" id="" onchange="selsum(this.value)" class="add_scores_select ">
                  <option value="" disabled selected>请选择</option>
                  <option value="1">第一学期</option>
                  <option value="2">第二学期</option>
                  <option value="3">第三学期</option>
                  <option value="4">第四学期</option>
                  <option value="5">第五学期</option>
              </select>
          </div>
            <div class="search">
                <label>请选择课程：</label>
                <select name="num" id="selclass" onchange="selstu(this.value)" class="add_scores_select"></select>
            </div>
            <form class="myform" action="/add_scores/add" method="post" enctype="application/x-www-form-urlencoded">
                <table id="tabs"></table>
                <input type="submit" value="录入" class="btn" onchange="insert(this.value)">
            </form>
            </div>
        </aside>
    </article>
</div>
</body>
<script type="text/javascript" src="/script/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// 声明一个全局变量用于存放学期号
var num=0
//设置表单form标签隐藏
$('.myform').hide();
// 获取学期号，提交学期号，返回课程内容
    function selsum(val) {
        num=val;
        $.post({
            url:'/add_scores/selclass',
            dataType:'json',
            data:{numid:val},
            success:function (cname) {
                console.log(cname);
            //    声明一个空字符串
                var cn='';
            //    2.拼接下拉菜单选项option
                cn+='<option value="" disabled selected>请选择</option>';
            //    4.将cname进行遍历
                cname.forEach((item)=>{
                    cn+='<option value="'+item.id+'" >'+item.class_name+'</option>'
                })
            //    3.拼接的结果插入到下拉菜单id=selclass
                $('#selclass').html(cn);
            }
        })
    }
//    获取课程id+学期号：将这两个数据提交到/add_scores/selstu
    function selstu(vals) {
        $('.myform').show()
    $.post({
        url:'/add_scores/selstu',
        dataType: 'json',
        data:{numid:num,classid:vals},
        success:function (menu) {
            console.log(menu);
            var str='';
            //判断是否有名单
            if(menu.length==0){
                str='<tr><td colspan="3">该课程所有学生成绩已完成录入</td></tr>';
            //    隐藏按钮
                $('.btn').hide()
            }else {
                str+='<tr><td>学号</td><td>姓名</td><td>成绩<input type="hidden" name="classid" value="'+vals+'"></td></tr>';
                menu.forEach((item)=>{
                    str+='<tr>';
                    str+='<td>'+item.uid+'<input type="hidden" value="'+item.uid+'" name="uid"></td>';
                    str+='<td>'+item.stu_name+'</td>';
                    str+='<td><input type="number" value="" name="scores" max="100" class="add_scores_select"/></td>';
                    str+='</tr>';
                })
                $('.btn').show()
            }
            $('#tabs').html(str);
        }
    })
    }

</script>
</html>